import { observer } from "mobx-react";
import { useEffect, useState } from "react";
import styled from 'styled-components';

const Other = styled.div`
  >button{
    border:none;outline:none;
    background-color: #fff;
    width: 100px; height: 40px;
    border-radius: 12px;font-size:14px;
    cursor: pointer;
  }
`
export const OtherView = observer((props: any) => {
  const [localText, setlocalText] = useState("读取本地存储")
  useEffect(() => {
    getLocal()
  })
  const getLocal = () => {
    let localTodos = window.localStorage.getItem('demo-todolist')
    if (localTodos === null) {
      setlocalText("暂无存储")
      return
    }
  }
  const useLocal = () => {
    let localTodos = window.localStorage.getItem('demo-todolist')
    if (localTodos === null) {
      return
    } else {
      props.store.setTodoList(JSON.parse(localTodos))
    }
  }
  const saveLocal = () => {
    window.localStorage.setItem('demo-todolist', JSON.stringify(props.store.todos))
    setlocalText("读取本地存储")
  }
  return (
    <Other>
      <button onClick={() => saveLocal()}>存储到本地</button>
      <button onClick={e => props.store.getTodoList(e, props)}>换一批</button>
      <button onClick={() => useLocal()}>{localText}</button>
    </Other>
  )
})